<template>
  <el-dialog custom-class="bm" :visible.sync="localVisible" :show-close="false">
    <div class="bm__title" slot="title">
      {{ title }}
      <i class="el-icon-circle-close bm__close" @click="closeModal"></i>
    </div>
    <slot></slot>
    <div v-if="total > pageSize" class="bm__footer" slot="footer">
      <span class="bm__page-info">共{{ pages }}页码，每页{{ pageSize }}条</span>
      <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  // 全局感知
  name: "BaseModal",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },

  // 本地状态
  data () {
    return {
      localVisible: this.visible,
    };
  },
  computed: {
    pages () {
      return Math.ceil(this.total / this.pageSize)
    }
  },

  // 事件
  watch: {
    visible (visible) {
      this.localVisible = visible
    },
    localVisible (localVisible) {
      this.$emit('update:visible', localVisible)
    }
  },
  beforeCreate () { },
  created () { },
  beforeMount () { },
  mounted () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },

  // 非响应式的属性
  methods: {
    handleCurrentChange (pagination) {
      this.$emit('update:pagination', pagination)
    },
    closeModal () {
      // this.$emit('update:pagination', 1)
      this.localVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.bm {
  &__title {
    position: relative;

    width: calc(100% + 40px);
    height: 48px;
    margin: -20px -20px 0 -20px;

    text-align: center;

    color: #fff;
    background: #3f7dff;

    font-size: 14px;
    line-height: 48px;
  }
  &__close {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 16px;
    height: 16px;
  }
  &__footer {
    display: flex;

    align-items: center;
    justify-content: center;
  }
  &__page-info {
    display: block;

    color: #999;

    font-size: 12px;
  }
}

</style>
